<template>
  <div>
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item v-bind="formItemLayout" label="项目名称">
        <a-select
          @change="changeProject"
          v-decorator="[
            'project_id',
            {
              rules: [{ required: true, message: '请输入项目名称' }]
            }
          ]"
        >
          <a-select-option
            v-for="(item, index) in projectList"
            :key="index"
            :value="item.id"
            >{{ item.project_name }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item
        v-bind="formItemLayout"
        label="申请金额"
        :extra="changeStatus() ? '' : '此项目剩余可申请金额为' + max + '元'"
      >
        <a-input-number
          :disabled="changeStatus()"
          style="width: 100%"
          step="10000"
          :min="0"
          :max="max"
          :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
          v-decorator="[
            'money',
            {
              rules: [{ required: true, message: '请输入申请金额' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="验证码">
        <a-row :gutter="8">
          <a-col :span="14">
            <a-input
              autocomplete="off"
              v-decorator="[
                'code',
                {
                  initialValue: '',
                  rules: [
                    {
                      required: true,
                      message: '请输入验证码'
                    }
                  ]
                }
              ]"
            />
          </a-col>
          <a-col :span="10">
            <a-button
              block
              @click="getCode"
              class="code-btn"
              v-if="!isShowTimer"
              >获取验证码</a-button
            >
            <span v-else class="count-wrapper">{{ count }}s</span>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item style="text-align: center">
        <a-button
          class="submit-btn"
          type="primary"
          html-type="submit"
          size="large"
          :disabled="projectList.length === 0 ? true : false"
        >
          提交申请
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { InputNumber, Col, Row } from "ant-design-vue";
import "@/assets/fonticon/iconfont.css";
export default {
  components: {
    aInputNumber: InputNumber,
    aCol: Col,
    aRow: Row
  },
  data() {
    return {
      timer: null,
      isShowTimer: false,
      count: 60,
      autoCompleteResult: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      projectList: [],
      max: 0
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    changeProject(value) {
      this.$ajax
        .post(this.$api.getProjectMoney, {
          project_id: value
        })
        .then(res => {
          this.max = res.balance;
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.$ajax
            .post(this.$api.startApp, values)
            .then(() => {
              this.$message.success("发起用款申请成功");
              this.$router.push({ name: "money" });
            })
            .catch(err => {
              this.$message.error(err);
            });
        }
      });
    },
    normFile(e) {
      if (Array.isArray(e)) {
        return e;
      }
      if (e.fileList.length === 2) {
        e.fileList.splice(0, 1);
      }
      return e && e.fileList;
    },
    changeStatus() {
      if (this.form.getFieldValue("project_id")) {
        return false;
      } else {
        return true;
      }
    },
    // 获取已募集成功项目
    getProjectList() {
      this.$ajax
        .post(this.$api.startApp)
        .then(res => {
          if (res.data.length === 0) {
            this.$message.warning("暂无可发起用款申请的项目!");
          }
          this.projectList = res.data;
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    // 获取验证码
    getCode() {
      clearInterval(this.timer);
      this.count = 60;
      this.$ajax
        .post(this.$api.getAppCode)
        .then(res => {
          this.$message.success(res.msg);
          this.isShowTimer = true;
          this.timer = setInterval(() => {
            this.count--;
            if (this.count === 0) {
              this.isShowTimer = false;
              clearInterval(this.timer);
              this.count = 60;
            }
          }, 1000);
        })
        .catch(err => {
          this.isShowTimer = false;
          this.$message.error(err);
        });
    }
  },
  created() {
    this.getProjectList();
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>

<style scoped lang="less">
.ant-form {
  max-width: 500px;
  margin: 20px auto;
}
.iconfont {
  font-size: 20px;
}
</style>
